<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GridManager:Angular 示例</title>
	<!--引入 GridManager 依赖-->
	<link rel="stylesheet" type="text/css" href="../css/gm.css">
	<script type="text/javascript" src="../js/gm.js"></script>
	<!--引入angular 依赖-->
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

	<style>
		html, body {
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			margin: 0;
			padding: 0;
		}

		h2 {
			font-size: 22px;
			padding: 10px 30px;
			color: #333;
		}

		p {
			font-size: 14px;
			padding: 10px 30px;
			color: #333;
			text-indent: 2em;
			margin: 0;
		}

		hr {
			margin-top: 18px;
			margin-bottom: 18px;
			border: 0;
			border-top: 1px solid #eee;
		}

		.plugin-action {
			color: #0f88eb;
			cursor: pointer;
		}
	</style>
</head>
<body ng-app="myApp">

<div ng-controller="gm">
	<angular-grid-manager gm-option="option" gm-scope="this"></angular-grid-manager>
</div>

<script type="text/javascript">
	var app = angular.module("myApp", []);
	app.controller('gm', function ($scope) {
		// 配置GridManager init 必要参数
		var colData = [{
			key: 'name',
			remind: 'the name',
			width: '100px',
			text: '名称',
			sorting: ''
		}, {
			key: 'info',
			remind: 'the info',
			text: '使用说明'
		}, {
			key: 'url',
			remind: 'the url',
			text: 'url'
		}, {
			key: 'createDate',
			remind: 'the createDate',
			width: '130px',
			text: '创建时间',
			sorting: 'DESC',
			template: function (createDate, rowObject) {
				return new Date(createDate).toLocaleDateString();
			}
		}, {
			key: 'lastDate',
			remind: 'the lastDate',
			width: '130px',
			text: '最后修改时间',
			sorting: '',
			template: function (lastDate, rowObject) {
				return new Date(lastDate).toLocaleDateString();
			}
		}, {
			key: 'action',
			remind: 'the action',
			width: '100px',
			text: '操作',
			template: function () {
				return '<span class="plugin-action" gm-click="testGM">删除</span>';
			}
		}];
		var queryInfo = {pluginId: 1};
		$scope.option = {
			gridManagerName: 'testAngular',
			height: '400px',
			columnData: colData,
			isCombSorting: true,
			supportAjaxPage: true,
			ajax_data: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
			ajax_type: 'POST',
			query: queryInfo,
			pageSize: 20,
			ajax_success: function () {
				console.log(arguments);
			},
			pagingAfter: function () {
				console.log('pagingAfter');
			}
		};

		$scope.testGM = function (row) {
			console.log('testGM=>', bb);
			console.log('testGM=>', this.option);
		};

		function bb() {
			console.log(1111);
		}

	});

	// 添加一个指令
	app.directive("angularGridManager", function () {
		return {
			restrict: 'E',
			scope: {
				gmOption: '=',
				gmScope: '='
			},
			template: '<table></table>',
			compile: function (element, arg) {
				return function ($scope) {
					var table = element[0].querySelector('angular-grid-manager table');
					table.GM('init', $scope.gmOption);
					GM.setScope(table, $scope.gmScope);
				}
			}
		};
	});

</script>
</body>
</html>
